<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM文档对象模型</title>
</head>
<body>
<h1>补全古诗</h1>
<div id="si">
    <h2>春晓</h2>
    <li class="poem">春眠不觉晓</li>
    <li class="poem">处处闻啼鸟</li>
    <li class="poem">夜来风雨声</li>
</div>
<form action="" name="form1">
请补全最后一句：
<input type="text" name="last" />
<input type="button" value="button" onclick="buqin()" />
</form>
<script>
function buqin() {
    let ist=document.createElement(`li`);
    ist.className=`poem`;
    let last=form1.last.value;
    txt=document.createTextNode(last);
    ist.appendChild(txt);
    document.getElementById(`si`).appendChild(ist);
}
</script>

<h1>insertBefore(new,ref)前插入节点</h1>
<h2 id="h">在上面插入节点</h2>
<form action="" name="form2">
文本：<input type="text" name="a1"/>
<input type="button" value="前插入" onmouseout="insetNode(`h`,document.form2.a1.value);" />
</form>
<script>
function crNode(str) {
    let newP=document.createElement(`p`);
    let newTxt=document.createTextNode(str);//创建节点文本
    newP.appendChild(newTxt);
    return newP;
}
function insetNode(nodeID,strs) {
    let node=document.getElementById(nodeID);
    let newNode=crNode(strs);
    if (node.parentNode) {
        node.parentNode.insertBefore(newNode,node);
    }
}
</script>

<h2>cloneNode(deep)复制节点</h2>
<form action="">
<hr>
<select name="shoptype" id="shoptype">
<option value="%">请选择类型</option>    
<option value="0">数码电子</option>    
<option value="1">家用电器</option>    
<option value="2">床上用品</option>    
</select>
</form>
<div id="di"></div>
<input type="button" value="复制" onclick="addrow(false)">
<input type="button" value="深度复制" onclick="addrow(true)">
<script>
function addrow(bl) {
    let sel=document.getElementById(`shoptype`);
    let newselect=sel.cloneNode(bl);
    let b=document.createElement(`br`);
    di.appendChild(newselect);
    di.appendChild(b);
}    
</script>

<h1>removeChild删除节点</h1>
<div id="dis">
<p>少林派掌门空闻大师</p>    
<p>武当派掌门人张三</p>
<p>峨眉派掌门人灭绝师大</p>
</div>
<form action="">
<input type="button" value="删除" onclick="delNode()">
</form>
<script>
function delNode() {
    let dele=document.getElementById(`dis`);
    if (dele.hasChildNodes()) { //判断是否有子节点
        dele.removeChild(dele.lastChild);
    }
}
</script>

<h1>replaceChild()方法用于替换节点</h1>
<strong id="as">要被替换的文本内容</strong> <br>
请输入标记：
<input type="text"  id="bj" /> <br>
输入文本：
<input type="text" id="dihuan">
<input type="button" value="替换" onclick="didi(dihuan.value,bj.value)" />
<script>
function didi(str,bj) {
    let rep=document.getElementById(`as`);
    if (rep) {
        let newNode=document.createElement(bj); //创建节点
        newNode.id=`as`;
        let newtext=document.createTextNode(str); //创建文本节点
        newNode.appendChild(newtext);
        rep.parentNode.replaceChild(newNode,rep);   //替换节点
    }
}
</script>

<h1>用getElementById(`userId`)在指定位置输出元素</h1>
<div id="clock">当前日期:</div>
<script>
function clockon(){
let now=new Date();
let year=now.getFullYear();
let month=now.getMonth();
let date=now.getDate();
let day=now.getDay();
let week;
month=month+1;
let arr_week=new Array(`星期日`,`星期一`,`星期二`,`星期三`,`星期四`,`星期五`,`星期六`);
week=arr_week[day];
time=year+`年`+month+`月`+date+`日`+week;
let textTimes=document.createTextNode(time);
document.getElementById(`clock`).appendChild(textTimes);
}
window.onload=clockon;
</script>

<h1>用getElementsByName()方法获取元素，得到一个数组</h1>
<input type="radio" name="likeRadio" id="radio" value="体育" />体育
<input type="radio" name="likeRadio" id="radio" value="美术" />美术
<input type="radio" name="likeRadio" id="radio" value="英语" />英语
<input type="radio" name="likeRadio" id="radio" value="政治" />政治
<input type="radio" name="likeRadio" id="radio" value="物理" />物理
<input type="radio" name="likeRadio" id="radio" value="化学" />化学
<script>
// alert(document.getElementsByName(`likeRadio`)[0].value);//获取第一个单选按钮的值
</script>

<h1>用getElementSbyName方法实现电影图怎片轮换效果</h1>
<div id="tabs">
<a name="i" href="#"><img src="images/box.png"  /></a>
<a name="i" href="#"><img src="images/box2.png"  /></a>
</div>
<script>
let letn=document.getElementsByName(`i`);   //获取name属性为i的元素
let pos=0;      //定义变量为0
function chnagepic(){
    letn[pos].style.display=`none`;
    pos++;
    if(pos==letn.length) pos=0;
    letn[pos].style.display=`block`;
}
setInterval(`chnagepic()`,3000);    //每三秒执行一次函数
</script>

<div id="ids"></div>
<script>
document.getElementById(`ids`).innerHTML=`2019-<b>10月</b>`;
</script>

<h1>outerHTML方法</h1>
<h1 id="a11">逐浪软件中国最优秀的CMS</h1>
<h1 id="a12">逐浪软件中国最优秀的CMS</h1>
<script>
let c1=document.getElementById(`a11`);
let c2=document.getElementById(`a12`);
e1.innerHTML=`<span>基于.net core构建</span>`;
e2.outerHTML=`<span>基于.net core构建</span>`;
</script>






<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>    

</body>
</html>